<template>
	<view class="content flex_c">
			<!-- <uni-nav-bar left-icon="back" left-text="返回" right-text="菜单" title="导航栏组件"></uni-nav-bar> -->
		<view class="statusHeight"></view>
		<view class="topNavWrap">
			<view class="topNav padRL15 flex_r flex_ai_c flex_jc_sb">
				<view class="flex_r flex_ai_c">
					<text class="navTitle">众维咨询</text>
				</view>
				<view class="flex_r flex_ai_c">
					<text class="navMsg">消息</text>
				</view>
			</view>
		</view>
		<view class="wrap marTop15">
			<view class="swiperWrap">
				<view class="swiper-content">
					<swiper class="swiper"
									:indicator-dots="swiperObj.indicatorDots" 
									:circular="swiperObj.circular"
									:autoplay="swiperObj.autoplay" 
									:interval="swiperObj.interval"
									:duration="swiperObj.duration"
									indicator-color="#fff" 
									indicator-active-color="#3478f5">
						<swiper-item v-for="(item,index) in swiperArr" :key="index" class="swiperItem" @touchmove ="slideSwiper" @touchend="slideSwiperEnd">
							<img class="swiperImage" :src="item.url">
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="insideFunWrap padRL15 flex_r flex_ai_c">
				<view class="flex_r flex_ai_c flex_jc_c flex_1">
					<view class="funiItem flex_ai_c flex_jc_c flex_c flex_1" v-for="(item,index) in insideFunArr" :key="index">
						<img :src="item.img">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			
			<view class="dynamicWrap flex_r flex_ai_c flex_jc_c flex_1">
				<view class="padRL15 flex_1 flex_r flex_ai_c flex_jc_s">
					<view class="dynamicICO flex_r flex_ai_c flex_jc_s ">
						<img src="static/img/dynamicLogo.png" />
					</view>
					<view class="swiperNewsWrap flex_1">
						<swiper class="swiper" :autoplay="true" :vertical="true" :circular="true">
							<swiper-item v-for="(item,index) in swiperNewsArr" :key="index" class="swiperItem">
								<text class="swiperNewsList">{{item.text}}</text>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			
			<view class="funListWrap marTop15">
				<view class="funList padRL15 flex_cr" v-for="(item,index) in funListArr" :key="index">
					<view class="forWrap">
						<view class="funTitleWrap flex_r">
							<text class="funTitle">{{item.title}}</text>
						</view>
						<view class="funEnterWrap">
							<view class="funEnter flex_cr" >
								<view class="funEnterFor flex_r" >
									<view class="flex_c flex_ai_c flex_1" v-for="(items,indexs) in item.funList" :key="indexs">
										<img :src="items.img"/>
										<text>{{items.text}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		// components: {
		// 	uniNavBar: () => import('@/components/uni-nav-bar/uni-nav-bar.vue'),
		// },
		data() {
			return {
				title: 'home',
				swiperArr: [{
						url: 'http://pic1.win4000.com/m00/ad/a1/6b61c423c15c737430d22931a9089756.jpg'
					},
					{
						url: 'http://pic1.win4000.com/wallpaper/d/592f761edfc28.jpg'
					}
				],
				swiperObj:{
					'indicatorDots':true,
					'circular':true,
					'autoplay':true,
					'interval':2500,
					'duration':1500
				},
				insideFunArr:[
					{img:'static/img/1.png',text:'通讯录'},
					{img:'static/img/2.png',text:'签到'},
					{img:'static/img/3.png',text:'请假'},
					{img:'static/img/4.png',text:'报销'},
					{img:'static/img/5.png',text:'审批'},
				],
				swiperNewsArr:[
					{text:'2021年元旦放假通知'},
					{text:'祝大家新年快乐'}
				],
				funListArr:[
					{
						title:'市场营销',
						funList:[
							{img:'static/img/1.png',text:'客户管理'},
							{img:'static/img/1.png',text:'订单详情'},
							{img:'static/img/1.png',text:'报价系统'},
							{img:'static/img/1.png',text:'客户案例'}
						],
					},
					{
						title:'订单情况',
						funList:[
							{img:'static/img/2.png',text:'订单派发'},
							{img:'static/img/2.png',text:'验厂任务'},
							{img:'static/img/2.png',text:'现场工具'},
							{img:'static/img/2.png',text:'采购清单'}
						],
					},
					{
						title:'人事行政',
						funList:[
							{img:'static/img/3.png',text:'签到统计'},
							{img:'static/img/3.png',text:'公告'},
							{img:'static/img/3.png',text:'个人简历'},
							{img:'static/img/3.png',text:'通讯录'}
						],
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			//滑动swiper
			slideSwiper(){
				this.swiperObj.duration = 300;
			},
			//停止滑动swiper
			slideSwiperEnd(){
				setTimeout(()=>{
					this.swiperObj.duration = 1500;
				},300)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-size: 28rpx;
	}
	.statusHeight{
		z-index: 2000;
		width: 100%;
		height: var(--status-bar-height);
		background-image: linear-gradient(to right, #3478f5 , #3478f5);
		position: fixed;
		top: 0;
		left: 0;
	}
	.topNavWrap {
		z-index: 2000;
		width: 100%;
		height: 90rpx;
		background-image: linear-gradient(to right, #3478f5 , #3478f5);
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		.topNav{
			width: calc(100% - 60rpx);
			height: 100%;
			font-size: 28rpx;
			.navTitle{
				font-size: 32rpx;
			}
			.navTitle,.navMsg {
				text-align: center;
				color: #FFFFFF;
			}
		}
		
	}
	.wrap{
		width: 100%;
		min-height: calc(100vh - 130rpx);
		margin-top: calc(var(--status-bar-height) + 100rpx);
		margin-bottom: 20rpx;
		.swiperWrap{
			height: 300rpx;
			padding: 0 30rpx;
			.swiper-content{
				overflow: hidden;
				border-radius: 30rpx;
				-webkit-transform:rotate(0deg);//IOS在使用transform时会导致border-radius失效，同级加-webkit-transform:rotate(0deg);
				.swiperItem{
					.swiperImage{
						width:100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}
			
		}
		.insideFunWrap{
			height: 200rpx;
			border-bottom: 1px solid #f5f5f5;
			color: #333;
			.funiItem{
				>img{
					width: 80rpx;
					height: 80rpx;
				}
				>text{
					margin-top: 6rpx;
					font-size: 28rpx;
				}
			}
		}
		.dynamicWrap{
			width: 100%;
			height: 100rpx;
			box-shadow: 0 5px 5px #f1f8fe;
			.dynamicICO{
				width: 80rpx;
				height: 100%;
				>img{
					width: 62rpx;
					height: 50rpx;
				}
			}
			.swiperNewsWrap{
				height: 100rpx;
				.swiper{
					height: 100rpx;
					.swiperItem{
						.swiperNewsList{
							line-height: 100rpx;
							font-size: 26rpx;
							color: #333;
						}
					}
				}
			}	
		}
		.funListWrap{
			width: 100%;
			color: #333;
			.funList{
				width: calc(100% - 60rpx);
				height: 240rpx;
				.forWrap{
					width: 100%;
					height: 200rpx;
					.funTitleWrap{
						.funTitle{
							font-size: 34rpx;
							font-weight: 600;
						}
					}
					.funEnterWrap{
						width: 100%;
						height: 164rpx;
						.funEnter{
							width: 100%;
							height: 164rpx;
							.funEnterFor{
								>view{
									>img{
										width: 80rpx;
										height: 80rpx;
									}
									>text{
										margin-top: 10rpx;
										font-size: 28rpx;
									}
								}
							}
							
						}
						
					}
				}
				
			}
		}
	}
</style>
